// import './App.css';
import React, { Component } from 'react';
import { Space, Table, Popconfirm, Button, Input, Divider, Form, Drawer, message,Image } from 'antd';
import axios from 'axios';
import { render } from '@testing-library/react';
import get from "../api/api"
const { TextArea } = Input;

class Jjie extends Component {
    formRef = React.createRef() //清空输入框内容
    formRef1 = React.createRef()
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            visible1: false,
            rowid: null,
            text: null,
            image: null,
            imageUrl: "",
            columns: [
                { title: '简介一', dataIndex: 'textone', key: 'textone', },
                { title: '简介二', dataIndex: 'texttwo', key: 'texttwo', },
                { title: '简介三', dataIndex: 'textthree', key: 'textthree', },
                
                {
                    title: '操作',
                    key: 'action',
                    render: (_, record) => (
                        <Space size="middle">
                            
                            <a className="action-link" onClick={this.showDrawer1.bind(this, record)}>修改</a>
                        </Space>
                    ),
                },
            ],
            data: [], //储存axios获取到的数据
        }
    }
    showDrawer1 = (r) => {
        console.log(r.objectId)
        this.setState({
            visible1: true,

            rowid: r.objectId,
        })
        console.log(this.rowid)
        setTimeout(() => { this.formRef1.current.setFieldsValue(r) }, 0);
    }; //设置 0 毫秒延迟回显数据
    //关闭新增信息对话框
    onClose = () => {
        this.setState({
            imageurl:"",
            visible: false
        });
        message.error('取消操作');
    };
  
  
  

    //将数据显示在初始页面
    componentDidMount() {
        this.readData()
    }

    //实现读取数据——————get
    readData() {
        get('https://r5ctn9z9.lc-cn-n1-shared.com/1.1/classes/pctext',
            {
                "X-LC-Id": "r5CTN9z96pCW8mI8fx9YxOmw-gzGzoHsz",
                "X-LC-Key": "8gSsl4Sz0ILMiQeMNMA8xQqg",
                'Content-Type': 'application/json'
            }
        )
            .then(res => {
                console.log(res)
                this.setState({
                    data: res.results

                })
                res.results.forEach((r, i) => {

                    r.key = i;
                });
            }).catch(error => {
                console.log(error)
            })
    }

 //修改信息时的Input输入框事件
 handleChange1 = (e) => {
    this.setState({
        [e.target.id]: e.target.value
    })
}

    //新增数据——————post
    //新增、修改数据时提交失败时的提示信息
    onFinishFailed = (errorInfo) => {
        console.log(this.state)
        // console.log('Failed:', this.state.imageUrl);
        message.error("按照格式要求输入")
    };
   
    

    updateData = () => {
        console.log(this.state)
        axios.put(`https://r5ctn9z9.lc-cn-n1-shared.com/1.1/classes/pctext/${this.state.rowid}`, {
            textone: this.state.textone,
            texttwo: this.state.texttwo,
            textthree: this.state.textthree,
            
        }, {
            headers: {
                " X-LC-Id": "r5CTN9z96pCW8mI8fx9YxOmw-gzGzoHsz",
                    "X-LC-Key": "8gSsl4Sz0ILMiQeMNMA8xQqg",
                    'Content-Type': 'application/json'
                
            }
        }).then(res => {
            message.success('修改成功');
            console.log(res)
            this.readData()
            this.setState({
                visible1: false
            });
        }).catch(error => {
            message.error("按照格式要求输入")
        })
        this.formRef1.current.resetFields() //修改成功后清空输入框中的数据
    }
   
 //关闭修改信息对话框
 onClose1 = () => {
    this.setState({
        visible1: false
    });
    message.error('取消操作');
};

    //实现修改数据——put或patch
   

    render() {
        let data = this.state.data;
        let columns = this.state.columns;
        let { textone,texttwo,textthree } = this.state;
        return (
            <div className="App">
               
                
                <Divider plain>简介</Divider>
                <Table columns={columns} dataSource={data} pagination={{ pageSize: 10 }} >   </Table>

                <Drawer title="修改个人信息" onClose={this.onClose1} visible={this.state.visible1}>
                    <Form ref={this.formRef1} onFinish={this.updateData} onFinishFailed={this.onFinishFailed} autoComplete="off" >
                        <Form.Item
                            name="textone"
                            label="textone"
                            rules={[{ required: true, message: 'textone', },]}     >
                            <TextArea rows={4} placeholder="名字" id="textone" value={textone} onChange={this.handleChange1}  title='输入2-6位中文汉字' />
                        </Form.Item>
                        <Form.Item
                            name="texttwo"
                            label="texttwo"
                            rules={[{ required: true, message: 'texttwo', },]}     >
                            <TextArea rows={4} placeholder="名字" id="texttwo" value={texttwo} onChange={this.handleChange1}  title='输入2-6位中文汉字' />
                        </Form.Item>
                        <Form.Item
                            name="textthree"
                            label="textthree"
                            rules={[{ required: true, message: 'textthree', },]}     >
                            <TextArea rows={4} placeholder="名字" id="textthree" value={textthree} onChange={this.handleChange1}  title='输入2-6位中文汉字' />
                        </Form.Item>
                       
                        <Button onClick={this.onClose1.bind(this)}>取消</Button>
                        <Button htmlType="submit" type="primary">完成 </Button>
                    </Form>
                </Drawer>

            </div>
        );
    }
}
export default Jjie;

